<template>
  <view>
    <view style="text-align: center;margin-top: 300rpx;" v-if="cartList.length===0">
      <image style="width: 200rpx;" mode="widthFix" src="../../static/cart_empty@2x.png"></image>
      <view style="margin-top: 20rpx;">空空如也~</view>
    </view>
    <view v-else>
      <my-address></my-address>
      <view class="cart-title">
        <view class="icon">
          <uni-icons type="cart" size="23"></uni-icons>
        </view>
        <view class="text">
          购物车
        </view>
      </view>
      <my-goods showNumberBox="true" :showSwiperAction="false" showRadio="true" @number-change="numberChange"
        @radio-change="radioChange" @delete-change="deleteChange" :goodList="cartList"></my-goods>
      <view style="height: 100rpx ;"></view>
      <my-settle></my-settle>
    </view>
  </view>

</template>

<script>
  import tabbarMixins from '@/mixins/tabbar.js'
  export default {
    mixins: [tabbarMixins],
    data() {
      return {
        cartList: this.$store.state.cart
      }
    },
    methods: {
      radioChange(data) {
        this.$store.commit('RadioChange', data)
        this.$store.commit('setCheckCount')
        this.$store.commit('setChecked')
        this.$store.commit('setPrice')
        this.showCount()
      },
      numberChange(data) {
        this.$store.commit('numberChange', data)
        this.$store.commit('changeCount')
        this.$store.commit('setCheckCount')
        this.$store.commit('setPrice')
        this.showCount()
      },
      deleteChange(id) {
        this.$store.commit('deleteChange', id)
        this.$store.commit('changeCount')
        this.$store.commit('setChecked')
        this.$store.commit('setPrice')
        this.cartList = this.cartList.filter(item => item.goods_id !== id)
        this.showCount()
      }
    },
    onShow() {
      this.$store.commit('setCheckCount')
      this.$store.commit('setChecked')
      this.$store.commit('setPrice')
    }
  }
</script>

<style lang="scss">
  .cart-title {
    display: flex;
    padding: 10rpx;

    .text {
      margin-left: 10rpx;
    }
  }
</style>